// production 生产模式下的webpack配置
// npm run build -- 运行打包
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// cnpm  i -D postcss-loader  autoprefixer
// 抽离css
const MiniCssExtract = require("mini-css-extract-plugin");
// 新增css压缩
const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      title: "webpack最终demo",
      minify: {
        // 去掉所有空格，压缩成一行代码
        collapseWhitespace: true,
        // 删除掉多余的双引号
        removeAttributeQuotes: true
      }
    }),
    new MiniCssExtract({
      filename: "./style/index[hash:6].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        // 抽离css cnpm i -D  mini-css-extract-plugin
        use: [
          {
            loader: MiniCssExtract.loader,
            options: {
              publicPath: "../"
            }
          },
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")]
            }
          }
        ]
      }
    ]
  },
  // 优化
  optimization: {
    // 压缩css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    // 代码分割只对多模块打包有用：多入口打包
    splitChunks: {
      // 分割代码js模块
      cacheGroups: {
        // 缓存组
        // 公共的模块
        common: {
          chunks: "initial", // 从入口文件开始找公共文件
          minSize: 0, // 被抽离的代码的大小，不为0字节的js文件
          minChunks: 2 // 引用在2次及以上就会被抽出来
        },
        // 私有的被执行的逻辑js
        vendor: {
          priority: 1, // 先执行这个，权重
          test: /node_modules/, // 【vue,jquery】把依赖包这个抽离出来
          chunks: "initial",
          minSize: 0,
          minChunks: 1 // 被引入的次数，如果一个js文件引入了一次node_modules里面的依赖包，就抽离出来
        }
      }
    }
  }
};
